var pic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F04%2F20210504062111_d8dc3.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668131448&t=6f7b1534d0d276bbfdad97cdf85700e6'

var vm = new Vue({
    el: '#app',
    data: {//负责定义响应式数据
        list: [
            { name: '秋刀鱼', price: 88, pic, count: 1 },
            { name: '大黄鱼', price: 777, pic, count: 2 },
            { name: '皮皮虾', price: 9, pic, count: 3 },
        ]
    },
    methods: {//负责定义方法
        // 点击+号时物品数量+1
        add(item) {
            // 最大是5
            if (item.count < 5) item.count++;
        },
        // 点击-号时物品数量-1
        sub(item) {
            // 最小是1
            if (item.count > 1) item.count--;
        },
        // 当点击清空时物品清空
        clear() {
            this.list = [];
        },
        // 当普通函数
        // totalCount(){
        //     console.log('普通函数: totalCount 执行了');
        //     var sum = 0;
        //     this.list.forEach((item)=>{
        //         sum += item.count;
        //     })
        //     return sum;
        // },
        // totalPrice(){
        //     var sum = 0;
        //     this.list.forEach((item)=>{
        //         sum += item.count * item.price;
        //     })
        //     return sum;
        // }
    },
    computed: {//负责定义计算属性
        // 1.计算属性在定义时像函数，使用时像只读变量
        // 2.当计算属性内部所依赖的数据发生改变时，计算属性内部的代码会自动重新执行，计算出一个新值，这个新值作为计算属性的值
        // 3.如果计算属性内部所依赖的数据未发生改变，则计算属性不会重新计算，而是使用第一次计算的缓存结果作为下一次使用的值（计算属性会缓存计算的结果）。

        zongshu() {
            var sum = 0;
            this.list.forEach((item) => {
                sum += item.count;
            });
            return sum;
        },
        // zongjia() {
        //     var sum = 0;
        //     this.list.forEach((item) => {
        //         sum += item.price * item.count;
        //     });
        //     return sum;
        // }

        // 写法二：setter&getter
        zongjia: {//get方法会在使用（渲染）计算属性时自动执行
            get() {
                var sum = 0;
                this.list.forEach((item) => {
                    sum += item.count * item.price;
                })
                return sum;
            },
            set() {//set方法会在给计算属性设置值时执行
                console.log('给zongjia设置值');
            }
        }
    }
})